// /**
// //  * Magento
//  *
//  * NOTICE OF LICENSE
//  *
//  * This source file is subject to the Academic Free License (AFL 3.0)
//  * that is bundled with this package in the file LICENSE_AFL.txt.
//  * It is also available through the world-wide-web at this URL:
//  * http://opensource.org/licenses/afl-3.0.php
//  * If you did not receive a copy of the license and are unable to
//  * obtain it through the world-wide-web, please send an email
//  * to license@magentocommerce.com so we can send you a copy immediately.
//  *
//  * DISCLAIMER
//  *
//  * Do not edit or add to this file if you wish to upgrade Magento to newer
//  * versions in the future. If you wish to customize Magento for your
//  * needs please refer to http://www.magentocommerce.com for more information.
//  *
//  * @category    design
//  * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
//  * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
//  */

.font-face(
    @family-name,
    @font-path,
    @font-weight: normal,
    @font-style: normal
) {
    @font-face {
        font-family: @family-name;
        src: url('@{font-path}.eot');
        src: url('@{font-path}.eot?#iefix') format('embedded-opentype'),
        url('@{font-path}.woff') format('woff'),
        url('@{font-path}.ttf') format('truetype'),
        url('@{font-path}.svg#@{family-name}') format('svg');
        font-weight: @font-weight;
        font-style: @font-style;
    }
}

//  Rem font size
.font-size(@sizeValue) when not (ispercentage(@sizeValue)) and not (@sizeValue = false) {
    @value: unit(@sizeValue);
    @remValue: (@value / @font-rem-ratio);
    @pxValue: @value;
    font-size: ~"@{pxValue}px";
    font-size: ~"@{remValue}rem";
}

.font-size(@sizeValue) when (ispercentage(@sizeValue)) and not (@sizeValue = false) {
    font-size: @sizeValue;
}

//  Rem line height
.line-height(@heightValue) when not (@heightValue = false) and not (ispercentage(@heightValue)) {
    @value: unit(@heightValue);
    @remValue: (@value / @font-rem-ratio);
    @pxValue: @value;
    line-height: ~"@{pxValue}px";
    line-height: ~"@{remValue}rem";
}

.line-height(@heightValue) when (ispercentage(@heightValue)) and not (@heightValue = false) {
    line-height: @heightValue;
}

.wrap-words() {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    .hyphens();
}

.text-overflow() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-hide() {
    font: ~"0/0" a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

//  Optional hyphenation
.hyphens(@mode: auto) {
    word-wrap: break-word;
    -webkit-hyphens: @mode;
    -moz-hyphens: @mode;
    -ms-hyphens: @mode; // IE10+
    -o-hyphens: @mode;
    hyphens: @mode;
}

.typography (
    @_font-size: @font-size-base,
    @_color: @text-color,
    @_font-family: @font-family-base,
    @_font-weight: @font-weight-base,
    @_line-height: @line-height-base,
    @_font-style: @font-style-base
) {
    .font-size(@_font-size);
    .add-color(@_color);
    .add-font-family(@_font-family);
    .add-font-weight(@_font-weight);
    .add-font-style(@_font-style);
    .add-line-height(@_line-height);
}

.list-reset-styles(@_margin: 0, @_padding: 0) {
    .add-margin(@_margin);
    .add-padding(@_padding);
    list-style-type: none;
    list-style-image: none;
}

.list-inline() {
    .list-reset-styles();
    > li {
        display: inline-block;
        vertical-align: top;
    }
}

.link(
    @_link-color: @link-color,
    @_link-text-decoration: @link-text-decoration,
    @_link-color-visited: @link-color-visited,
    @_link-text-decoration-visited: @link-text-decoration-visited,
    @_link-color-hover: @link-color-hover,
    @_link-text-decoration-hover: @link-text-decoration-hover,
    @_link-color-active: @link-color-active,
    @_link-text-decoration-active: @link-text-decoration-active
) {
    .add-color(@_link-color);
    text-decoration: @_link-text-decoration;
    &:visited {
        .add-color(@_link-color-visited);
        text-decoration: @_link-text-decoration-visited;
    }
    &:hover {
        .add-color(@_link-color-hover);
        text-decoration: @_link-text-decoration-hover;
    }
    &:active {
        .add-color(@_link-color-active);
        text-decoration: @_link-text-decoration-active;
    }
    &:focus {
        .tab-focus();
    }
}

.heading(@_heading_level: h1) {
    @_font-color: "@{_heading_level}-font-color";
    @_font-size: "@{_heading_level}-font-size";
    @_font-family: "@{_heading_level}-font-family";
    @_font-weight: "@{_heading_level}-font-weight";
    @_line-height: "@{_heading_level}-line-height";
    @_font-style: "@{_heading_level}-font-style";
    @_margin-top: "@{_heading_level}-margin-top";
    @_margin-bottom: "@{_heading_level}-margin-bottom";
        .typography(
            @@_font-size,
            @@_font-color,
            @@_font-family,
            @@_font-weight,
            @@_line-height,
            @@_font-style
        );
        .margin-vertical-rem(@@_margin-top, @@_margin-bottom);
}

//
//  Base typography
//--------------------------------------
.typography-base() {
    html {
        font-size: @font-size-root;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    body {
        .typography();
    }

    p {
        .margin-vertical-rem(@p-margin-top, @p-margin-bottom);
    }

    // Abbreviations and acronyms
    abbr[title] {
        cursor: help;
        border-bottom: 1px dotted @abbr-border-color;
    }

    b,
    strong {
        font-weight: @font-weight-bold;
    }

    em,
    i {
        font-style: @font-style-emphasis;
    }

    mark {
        .add-background(@mark-bg);
        .add-color(@mark-color);
    }

    small,
    .small {
        font-size: @font-size-s;
    }

    hr {
        margin-top: @line-height-computed;
        margin-bottom: @line-height-computed;
        border: 0;
        border-top: @hr-border-width @hr-border-style @hr-border-color;
    }

    sub,
    sup {
        font-size: (@font-size-xs/@font-size-base)*100%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    sup {
        top: -0.5em;
    }
    sub {
        bottom: -0.25em;
    }

    dfn {
        font-style: @font-style-emphasis;
    }
}

//
//  Headings
//--------------------------------------
.typography-headings() {
    h1 {
        .heading(h1);
    }

    h2 {
        .heading(h2);
    }

    h3 {
        .heading(h3);
    }

    h4 {
        .heading(h4);
    }

    h5 {
        .heading(h5);
    }

    h6 {
        .heading(h6);
    }

    h1, h2, h3, h4, h5, h6 {
        small,
        .small {
            .typography(
                @heading-small-size,
                @heading-small-color,
                @_line-height: @heading-small-line-height
            );
        }
    }
}

//
//  Links
// --------------------------------------------------
.typography-links() {
    a,
    .alink {
        .link();
    }
}

//
//  Unordered and Ordered lists
// --------------------------------------------------
.typography-lists() {
    ul,
    ol {
        .margin-vertical-rem(@list-margin-top, @list-margin-bottom);
        //.typography(@list-font-size-base, @list-color-base);
        > li {
            .margin-vertical-rem(@list-item-margin-top, @list-item-margin-bottom);
        }
        ul,
        ol {
            margin-bottom: 0;
        }
    }

    dl {
        margin-top: @dl-margin-top;
        margin-bottom: @dl-margin-bottom;
    }
    dt {
        .add-font-weight(@dt-font-weight);
        margin-top: @dt-margin-top;
        margin-bottom: @dt-margin-bottom;
    }
    dd {
        margin-top: @dd-margin-top;
        margin-bottom: @dd-margin-bottom;
    }
}

//
//  Code (inline and block)
// --------------------------------------------------
.typography-code() {
    code,
    kbd,
    pre,
    samp {
        font-family: @font-family-monospace;
    }

    // Inline code
    code {
        .add-padding(@code-padding);
        .font-size(@code-font-size);
        .add-color(@code-color);
        .add-background(@code-bg);
        white-space: nowrap;
    }

    // User input typically entered via keyboard
    kbd {
        .add-padding(@code-padding);
        .font-size(@code-font-size);
        .add-color(@kbd-color);
        .add-background(@kbd-bg);
    }

    // Blocks of code
    pre {
        .add-background(@pre-bg);
        border: @pre-border-width solid @pre-border-color;
        .add-color(@pre-color);
        display: block;
        .font-size (@code-font-size);
        margin: 0 0 @indent-s-base;
        line-height: @line-height-base;
        .add-padding(@indent-s-base);
        word-break: break-all;
        word-wrap: break-word;
        code {
            padding: 0;
            font-size: inherit;
            color: inherit;
            white-space: pre-wrap;
            background-color: transparent;
            border-radius: 0;
        }
    }
}

//
//  Blockquotes
// --------------------------------------------------
.typography-blockquote() {
    blockquote {
        .add-padding(@blockquote-padding);
        .add-margin(@blockquote-margin);
        .typography(
              @_font-size: @blockquote-font-size,
              @_font-style: @blockquote-font-style
        );
        border-left: @blockquote-border-width solid @blockquote-border-color;

        p,
        ul,
        ol {
            &:last-child {
                margin-bottom: 0;
            }
        }

        footer,
        small,
        .small {
            .add-color(@blockquote-small-color);
            display: block;
            .font-size(@blockquote-small-font-size);
            line-height: @line-height-base;
            &:before {
                content: @blockquote-before-content;
            }
        }
        cite {
            .add-font-style(@cite-font-style);
        }
    }

    // Quotes
    blockquote:before,
    blockquote:after {
        content: "";
    }

    q {
        quotes: none;
    }
    q:before,
    q:after {
        content: '';
        content: none;
    }

    // Undo browser default styling
    cite {
        .add-font-style(@cite-font-style);
    }
}

.typography-all() {
    .typography-base();
    .typography-headings();
    .typography-links();
    .typography-lists();
    .typography-code();
    .typography-blockquote();
}
